<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 490px;
            display: flex;
            margin:auto ;
            flex-wrap: wrap;
            padding: 0;
            list-style: none;
        }
        li{
            width: 70px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            background-color: #333;
        }
    </style>
</head>
<body>
    <span id="prev">&lt;</span>
    <ul id="list">
        
    </ul>

    <script>

        // 日历分3部分
        //   本月的天数
        //   上个月的部分天数
        //        经过观察，发现规律  -- 上个月的第一天   上个月的最后一天   本月的第一天是星期几  
        //            发现 日历上显示的上个月的第一天 = 上个月的最后一天 - 本月的第一天是星期几 + 2
        //   下个月的天数

        var date = new Date() ;

        renderList(date) ;    // 一开始的时间


        // 上翻页
        var oPrev = document.getElementById('prev') ;
        oPrev.onclick = function() {
            date.setDate(0) ;
            renderList(date) ;   // 推到了上个月
        }

 




        



        // 获取上本月的天数
        function getNowDays(t) {
            // 局部变量
            var date = new Date(t) ;
            // 日期推到下个月
            date.setDate(32) ;
            // 推到上个月的第0天 -- 也就是本月的最后一天
            date.setDate(0) ;
            // 获取本月的最后一天
            var maxDay = date.getDate() ;
            var arr = [] ;
            for(var i = 1 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }



        // 求上个月的天数
        function getPrevDays(t) {
            var date = new Date(t) ;
            // 求本月的第一天是星期几
            date.setDate(1) ;
            var week = date.getDay() ;
            // 上个月的最后一天  -- 也就是本月的第0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            var arr = [] ;
            // 经过发现的规律，上个月所显示的第一天是 。。。。
            for(var i = maxDay - week + 2 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }

    


        // 求下个月的天数   42 - 上个月的天数 - 本月的天数
        function getNextDays(t) {
            var date = new Date(t) ;
            var arr = [] ;
            for(var i = 1 ; i <= 42 - getPrevDays(date).length - getNowDays(date).length ; i++) {
                arr.push(i) ;
            }
            return arr
        }

       



        // 动态生成li
        function renderList(t) {
            var date = new Date(t) ;
            var res = '' ;
            var prevDaysArr = getPrevDays(date) ;
            var nowDaysArr = getNowDays(date) ;
            var nextDaysArr = getNextDays(date) ;
            for(var i = 0 ; i < prevDaysArr.length ; i++) {
                res += `<li style="color:gray;">${prevDaysArr[i]}</li>`
            }
            for(var i = 0 ; i < nowDaysArr.length ; i++) {
                res += `<li style="color:white;">${nowDaysArr[i]}</li>`
            }
            for(var i = 0 ; i < nextDaysArr.length ; i++) {
                res += `<li style="color:gray;">${nextDaysArr[i]}</li>`
            }
            // return res ;
            var oUl = document.getElementById('list') ;
            oUl.innerHTML = res ;
        }

    </script>







</body>
</html>